<template>
  <div class="business-plan-information-view">
    <el-form
      :inline="true"
      label-position="right"
      label-width="110px"
      class="form-detail"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="招商规划编号：">
            {{ datas.planInfo.planNo }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="招商规划名称：">
            {{ datas.planInfo.planName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="招商地区：">
            <area-list-view :areas="datas.planInfo.region" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="通用名：">
            {{ datas.planInfo.productPopularName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="商品名：">
            {{ datas.planInfo.productName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="包装规格：">
            {{ datas.planInfo.packSpecs }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产厂家：">
            {{ datas.planInfo.producer }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="终端价：">
            {{ datas.planInfo.terminalPrice }}元/{{ getLabel('sell_unit', datas.planInfo.sellUnit) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="适用终端：">
            {{ getLabel('app_mode', datas.planInfo.terminalType) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="准入模式：">
            {{ getLabel('access_mode', datas.planInfo.accessMode) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="价格属性：">
            {{ getLabel('price_type', datas.planInfo.priceProperty) }}
          </el-form-item>
        </el-col>
        <!--        <el-col :span="8">-->
        <!--          <el-form-item label="指导交易价：">-->
        <!--            {{ datas.planInfo.guidingPrice }}元/{{ getLabel('sell_unit',datas.planInfo.sellUnit) }}-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="8">
          <el-form-item label="招商结束日期：">
            {{ dateFormat("yyyy-mm-dd", datas.planInfo.expireTime) }}
          </el-form-item>
        </el-col>
        <!--
        <el-col :span="8">
          <el-form-item label="来源：">
            {{ datas.planInfo.planSource }}
          </el-form-item>
        </el-col>
        -->
        <el-col :span="8">
          <el-form-item label="关联市场准入：">
            <el-link
              v-if="datas.planInfo.chanceId"
              :underline="false"
              style="display: flex;align-items: center"
              type="primary"
              @click="onClick"
            >
              {{ datas.planInfo.chanceName }}
            </el-link>
            <span v-else>暂无</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建人：">
            {{ datas.planInfo.creatorName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间：">
            {{ dateFormat("yyyy-mm-dd", datas.planInfo.createdAt) }}
          </el-form-item>
        </el-col>
      </el-row>
      <!--
      <el-row>
        <el-col :span="24">
          <el-form-item label="其他描述：">
            <div v-if="datas.planInfo.remark">{{ datas.planInfo.remark }}</div>
            <div v-else>暂无</div>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="其他附件：">
            <div v-if="datas.planInfo.files && datas.planInfo.files.length">
              <upload-file-view :file-arr="datas.planInfo.files" :is-upload="false"/>
            </div>
            <div v-else>暂无</div>
          </el-form-item>
        </el-col>
      </el-row>
      -->
    </el-form>

  </div>

  <!-- 计划详情 -->
  <detail-drawer
    ref="detailDrawer"
    :size-width="1000"
    custom-title
  >
    <template #title>
      <span>关联市场准入 - {{ datas.planInfo.chanceName }}</span>
    </template>
    <template #contents>

      <chance-info :id="datas.planInfo.chanceId" />

    </template>
  </detail-drawer>

</template>

<script>
import { defineAsyncComponent, defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  name: 'Information',
  components: {
    chanceInfo: defineAsyncComponent(() =>
      import('../../../../commonView/detailComponents/business/chanceInfo.vue')
    ),
  },
  props: {
    datas: {
      type: Object,
      default: {},
    },
    isAudit: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    var data = reactive({
      detailDrawer: null,
    })

    const onClick = () => {
      data.detailDrawer.open()
    }

    return {
      ...toRefs(data),

      onClick,
    }
  },
})
</script>

<style scoped>
</style>
